<template>
	<view class="container">
		<uni-card class="card" title="核销码MC-1234-5678-9012">
			<view class="service">
				<view class="title">服务内容</view>
				<view>XXX标准洗车服务包含</view>
				<view>整车泡沫冲洗擦干</view>
				<view>轮胎轮毂冲洗清洁</view>
				<view>车内吸尘</view>
				<view>内饰脚垫简单除尘</view>
				<view>（不包含虫尸、水泥、沥青和顽固污渍清理等)</view>
			</view>
			<view class="order">
				<view class="orderTitle">订单信息</view>
				<view class="info">
					<view>订单价格：</view>
					<view>￥30.00</view>
				</view>
				<view class="info">
					<view>实付金额：</view>
					<view>￥25.00</view>
				</view>
				<view class="info">
					<view>优惠金额：</view>
					<view>￥5.00</view>
				</view>
				<view class="info">
					<view>订单编号：</view>
					<view>2020032554565799</view>
				</view>
				<view class="info">
					<view>支付时间：</view>
					<view>2020.03.30 14:40:45</view>
				</view>
				<view class="info">
					<view>预约时间：</view>
					<view> 2020.03.30 14:40 </view>
				</view>
			</view>
		</uni-card>
		<button class="button" @click="toggle" :style="{ backgroundColor: isVerified ? 'rgba(154,154,154,1)' : 'rgba(13,122,247,1)'}"><text class="button-text">{{ isVerified ? '已核销' : '确认核销' }} </text></button>
		<yfx-tooltip ref="tooltip"></yfx-tooltip>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isVerified:false,
			}
		},
		methods: {
			//显示弹窗
			toggle() {
				this.$refs.tooltip.open({
					msg: "核销此订单",
					content: "请您仔细核对订单，此操作不可撤销，请谨慎操作",
					confirm: () => {
						console.log("点击确认按钮触发")
						this.isVerified = true; // 更新状态  
					},
					cancel: () => {
						console.log("点击取消按钮触发")
					}
				})
			},

		}
	}
</script>

<style>
	page{
		background-color: #8C8B8B 14%;
	}
	.container {
		margin-top: 80rpx;
	}

	.card {
		border-radius: 40rpx;
		font-size: 28rpx;
		font-weight: bold;
		text-align: center;
	}

	.service {
		margin-top: 10rpx;
		text-align: left;
		width: 588rpx;
		height: 340rpx;
		line-height: 40rpx;
		font-size: 28rpx;
		color: rgb(16, 16, 16);
		border-bottom: 1px solid rgba(140, 139, 139, 0.14);
	}

	.service>.title {
		font-weight: bold;
	}

	.order {
		width: 400rpx;
		height: 350rpx;
		margin-top: 50rpx;
		text-align: left;
		font-size: 28rpx;
		color: rgb(16, 16, 16);
		line-height: 40rpx;

	}

	.orderTitle {
		font-weight: bold;
	}

	.info {
		display: flex;
	}

	.button {
		width: 524rpx;
		height: 80rpx;
		border-radius: 32rpx;
		line-height: 80rpx;
		text-align: center;
		background-color: rgba(13, 122, 247, 1);
		color: rgba(255, 255, 255, 1);
		margin-top: 50rpx;
	}
</style>